<script setup>
import { ref } from 'vue';
import router from '../router/index.ts'
import { useCounterStore } from '../stores/counter';
const store = useCounterStore()
const show = ref(false);
const onClickLeft = () => {
    router.push('/')
}
const password = ref('');
const password2 = ref('');
import { showFailToast } from 'vant';
import { update } from '../apis/user.js'
//确认
async function confirm() {
    if (password.value === password2.value) {
        //发送修改密码请求
        await update({ password: password.value })
        showFailToast('修改成功');
        password.value = ''
        password2.value = ''
    } else {
        showFailToast('修改失败.两次输入的密码不一致');
        password.value = ''
        password2.value = ''
    }


}
//取消
function cancel() {
    password.value = ''
    password2.value = ''
}
//退出登录
function loginout() {
    store.clearUserInfo()
    router.push('/login')
}
</script>
<template>
    <div>
        <van-nav-bar title="个人中心" left-text="首页" left-arrow @click-left="onClickLeft" />
        <div style="margin-top: 10px;margin-left: 10px">
            <div> 昵称:{{ store.name }}</div>
            <div>账号:{{ store.phone }}</div>
        </div>
        <van-button plain type="primary" size="small" style="margin-left: 60%;margin-right: 20px;"
            @click="show = true">修改密码</van-button>
        <van-button plain type="primary" size="small" @click="loginout()">退出登录</van-button>

        <van-button icon="arrow" icon-position="right" style="width: 100%;margin-top: 10%;"
            @click="$router.push({ path: '/address', query: { isUser: 1 } })">
            我的地址
        </van-button>
        <van-button icon="arrow" icon-position="right" style="width: 100%;" @click="$router.push('/order')">
            我的订单
        </van-button>
        <div style="margin-left: 20%;margin-top: 20%;">
            <div style="margin-left: 19%;"> 版本 1.0.0</div>
            <div style="margin-top: 10px;">若有问题请联系客服:xxxx-xxxx</div>
        </div>
        <van-dialog v-model:show="show" title="修改密码" show-cancel-button @confirm="confirm"
            :confirmButtonDisabled="password === '' || password2 === ''" @cancel="cancel">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请输入密码' }]" />
                    <van-field v-model="password2" type="password" name="password2" label="确认密码" placeholder="确认密码"
                        :rules="[{ required: true, message: '请再次输入密码' }]" />
                </van-cell-group>
            </van-form>
        </van-dialog>
    </div>
</template>